<template>
  <div class="login">
    <div class="login-form">
      <div class="left">
        Welcome！
        <br />
        欢迎使用{{ title }}
      </div>
      <div class="right">
        <div class="item" style="margin-top: 61px">
          <img class="icon" src="@/assets/images/login-user.png" alt="" />
          <el-input v-model="loginForm.account" placeholder="账号" name="account" type="text" />
        </div>
        <div class="item" style="margin-top: 31px">
          <img class="icon" src="@/assets/images/login-sms.png" alt="" />
          <el-input v-model="loginForm.verifyCode" type="text" placeholder="验证码" name="sms" />
          <el-button style="width:200px;font-size:15px;" :disabled="disabled" @click="sendSms">{{label}}</el-button>
        </div>
        <el-button :disabled="!loginForm.account || !loginForm.verifyCode" class="login-btn" :loading="loading" @click.native.prevent="handleLogin">
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
import {clearAllLocal} from '@/utils/localStorageUtils'
import { getAuthSms } from '@/api/user';
export default {
  data() {
    return {
      title: window.$setting.title || "后台管理系统",
      loginForm: {
        account: "",
        key: '',
        verifyCode: "",
      },
      disabled: false,
      label: "发送验证码",
      timer: null,
      loading: false,
    };
  },
  created() {
    clearAllLocal();
  },
  methods: {
    sendSms() {
      if (!this.loginForm.account) {
        return this.$message.error("用输入用户名");
      }
      if (this.disabled) return;
      this.disabled = true;
      let num = 60;
      this.timer = setInterval(() => {
        if (num <= 1) {
          (this.disabled = false), (this.label = "发送验证码");
          clearInterval(this.timer);
          this.timer = null;
        } else {
          num -= 1;
          this.label = num + "s后重试";
        }
      }, 1000);
      getAuthSms({ username: this.loginForm.account }).then((res) => {
        if(res.code == 1) {
            this.loginForm.key = res.data.key;
        }
      }).catch(err => console.log("验证码：", err))
    },
    async handleLogin() {
        if (!this.loginForm.account) return;
        if (!this.loginForm.verifyCode) return;
        this.loading = true;
        try {
            const res = await this.$store.dispatch('login', this.loginForm);
            this.$router.replace({path: '/index'}).catch((err) =>{console.log("login:",err)})
            this.loading = false;
        } catch (error) {
            this.loading = false;
            console.log("degnl---", error)
        }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-input__inner {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
  }
}
.login {
  height: 100%;
  width: 100%;
  background-image: url("@/assets/images/login-bg.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;

  .login-form {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 677px;
    transform: translate(-50%, -50%);
    display: flex;
    .left {
      width: 658px;
      height: 100%;
      background-image: url("@/assets/images/login-tip.png");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      font-size: 28px;
      font-family: PingFangSCRegular;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .right {
      width: 658px;
      height: 100%;
      background: #ffffff;
      padding: 109px;
      box-sizing: border-box;
      .item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 441px;
        height: 56px;
        border-bottom: 1px solid #dbdbdb;
        .icon {
          margin-left: 12px;
          margin-right: 23px;
          width: 17px;
          height: 18px;
        }
        .login-code {
          width: 100px;
          height: 38px;
          margin-right: 12px;
        }

        &:focus-within {
          border-bottom: 1px solid #999999;
        }
      }
      .login-btn {
        margin: 0 auto;
        margin-top: 100px;

        width: 440px;
        height: 58px;
        background-color: #4692ea;
        border-radius: 30px;
        font-size: 24px;
        font-weight: 500;
        color: #ffffff;
        &:disabled {
          background-color: #999999;
        }
      }
    }
  }
}
</style>
